<template>
    <ul class="prolist" :class="'cols_' + num">
        <li class="proItem" v-for="item of proList" :key="item.proid" @click="toDetail(item.proid)">
            <div class="itemImage">
                <van-image :src="item.img1"/>
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--12">{{ item.proname }}</div>
                <div class="price">￥{{ item.originprice }}</div>
            </div>
        </li>
        <!-- <li class="proItem">
            <div class="itemImage">
                <van-image src=""/>
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--12">
                    产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
                </div>
                <div class="price">￥111</div>
            </div>
        </li>
        <li class="proItem">
            <div class="itemImage">
                <van-image src=""/>
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--12">
                    产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
                </div>
                <div class="price">￥111</div>
            </div>
        </li>
        <li class="proItem">
            <div class="itemImage">
                <van-image src=""/>
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--12">
                    产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
                </div>
                <div class="price">￥111</div>
            </div>
        </li>
        <li class="proItem">
            <div class="itemImage">
                <van-image src=""/>
            </div>
            <div class="itemInfo">
                <div class="proname van-multi-ellipsis--12">
                    产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
                </div>
                <div class="price">￥111</div>
            </div>
        </li> -->
        <div class="changeIcon" @click="num = num === 1 ? 2 : 1">
            <van-icon name="apps-o" v-if="num === 1" size="24"/>
            <van-icon name="bars" v-else size="24"/>
        </div>
    </ul>
</template>
<script>
import Vue from 'vue'
import { Image as VanImage, Icon } from 'vant'
Vue.use(VanImage)
Vue.use(Icon)
export default {
  data () {
    return {
      num: 1
    }
  },
  props: {
    proList: {
      type: Array,
      require: true
    }
  },
  methods: {
    toDetail (proid) {
    //   this.$router.push('/detail/' + proid)
    //   this.$router.push({ name: 'detail', params: { proid } })
      this.$router.push({ path: '/detail/' + proid })
    }
  }
}
</script>

<style lang="stylus" scoped>
.prolist
  &.cols_1
    .proItem
      height 1rem
      display flex
      background-color #fff
      .itemImage
        width 1rem
        height 1rem
        box-sizing border-box
        .van-image
          width 0.94rem
          height 0.94rem
          margin 0.03rem
          img
            width 0.94rem
            height 0.94rem
            margin 0.03rem
            display block
            box-sizing border-box
        .itemInfo
          flex 1
          height 1rem
          box-sizing border-box
          padding 5px 10px
          border-bottom 1px solid #ccc
          .proname
            font-size 14px
          .price
            color #f66
  &.col_2
    display flex
    flex-wrap wrap
    .proItem
      width 48%
      margin 3px 1%
      .itemImage
        height 1.7rem
        width 100%
        .van-image
          width 100%
          height 100%
          overflow hidden
          border 1px solid #ccc
          img
           width 100%
           height 100%
           display block
      .itemInfo
        padding 3px 10px
        background-color #fff
        .proname
          font-size 14px
          height 32px
        .price
          color #f66
.changeIcon
  position fixed
  width 32px
  height 32px
  border-radius 50%
  border 1px solid #cccccc
  display flex
  justify-content center
  align-items center
  bottom 60px
  right 10px
  background-color #fff
</style>
